import style from './style.module.scss'
import { useBasicDataStore } from "@/stores/basicDataStore";
import { useCmpDataStore } from "@/stores/cmpDataStore";
import CmpStoreSearch from "@/components/search/CmpStoreSearch";
import { Tag } from 'antd';
import type { StoreInfo, StoreTag, StoreType } from '@/Interface/StoreInfoInterface';
import { STORE_TAG_COLOR, STORE_TYPE_COLOR } from '@/config/storeConfig';


export default function LeftSide() {

  const basicData = useBasicDataStore(state => state.basicData) as StoreInfo
  const cmpData = useCmpDataStore(state => state.cmpData) as StoreInfo


  const {
    basicInfo: {
      storeId: bstoreId = '',
      storeName: bstoreName = '',
      city: bcity = '',
      storeType: bstoreType = '',
      areaSize: bareaSize = 0,
      openingDate: bopeningDate = '',
      tags: [btag = '无标签'] = ['无标签']
    } = {},
    annualData: {
      avgCustomerValue: bavgCustomerValue = 0,
      rating: brating = '',
      reviews: { positive: bpositive = 0, negative: bnegative = 0 } = {},
      yearAmount: byearAmount = 0,
      yearGrowth: byearGrowth = ''
    } = {}
  } = basicData || {};

  const {
    basicInfo: {
      storeId: cstoreId = '',
      storeName: cstoreName = '',
      city: ccity = '',
      storeType: cstoreType = '',
      areaSize: careaSize = 0,
      openingDate: copeningDate = '',
      tags: [ctag = '无标签'] = ['无标签']
    } = {},
    annualData: {
      avgCustomerValue: cavgCustomerValue = 0,
      rating: crating = '',
      reviews: { positive: cpositive = 0, negative: cnegative = 0 } = {},
      yearAmount: cyearAmount = 0,
      yearGrowth: cyearGrowth = ''
    } = {}
  } = cmpData || {};

  return (
    <>
      <div className={style.left}>
        <div className={style.top}>
          <CmpStoreSearch />
        </div>
        <div className={style.content}>
          <div className={style.info}>
            <h3>门店名:</h3>
            <ul>
              <li>门店ID：</li>
              <li>所在城市：</li>
              <li>年营业额：</li>
              <li>年增长率：</li>
              <li>连锁方式：</li>
              <li>类型划分：</li>
              <li>客单价：</li>
              <li>综合评分：</li>
              <li>评论数：</li>
              <li>占地面积：</li>
              <li>开业日期：</li>
              <li>标识:</li>
            </ul>
          </div>
          <div className={style.basic}>
            <h3>
              {bstoreName}
            </h3>
            <ul>
              <li>{bstoreId}</li>
              <li>{bcity}</li>
              <li>{(byearAmount / 10000).toFixed(2)}{' 万元'}</li>
              <li>{byearGrowth}</li>
              <li>
                <Tag color={STORE_TYPE_COLOR[bstoreType as StoreType]}>{bstoreType}</Tag>
              </li>
              <li>
                <Tag color={STORE_TAG_COLOR[btag as StoreTag]}>{btag}</Tag>
              </li>
              <li>{bavgCustomerValue}{' 元/人'}</li>
              <li>{brating}{' 分'}</li>
              <li>{bpositive}{'好评'}&nbsp;{bnegative}{'差评'}</li>
              <li>{bareaSize + ' m³'}</li>
              <li>{bopeningDate}</li>
              <li>
                <Tag color='blue'>当前门店</Tag>
              </li>
            </ul>
          </div>
          <div className={style.compare}>
            <h3>
              {cstoreName}
            </h3>
            <ul>
              <li>{cstoreId}</li>
              <li>{ccity}</li>
              <li>{(cyearAmount / 10000).toFixed(2)}{' 万元'}</li>
              <li>{cyearGrowth}</li>
              <li>
                <Tag color={STORE_TYPE_COLOR[cstoreType as StoreType]}>{cstoreType}</Tag>
              </li>
              <li>
                <Tag color={STORE_TAG_COLOR[ctag as StoreTag]}>{ctag}</Tag>
              </li>
              <li>{cavgCustomerValue}{' 元/人'}</li>
              <li>{crating}{' 分'}</li>
              <li>{cpositive}{'好评'}&nbsp;{cnegative}{'差评'}</li>
              <li>{careaSize + ' m³'}</li>
              <li>{copeningDate}</li>
              <li>
                <Tag color='blue'>对比门店</Tag>
              </li>
            </ul>
          </div>
        </div>
      </div >
    </>
  )
}